<script setup lang="ts">
import useUserStore from '@/store/userXcx'
import type { loginResIntXcx } from '@/apis/login/types'
import { ProjectName } from '@/config'
const userStore = useUserStore()
const agreementCheckbox = ref([])
const checkboxChange = (e: any) => {
    console.log(e, agreementCheckbox.value)
    if (e.length > 0) {
        isReadAgree.value = true
    } else {
        isReadAgree.value = false
    }
    // 只执行一次
    if (!isWxLogin.value) {
        wxLogin()
    }
}
// 是否勾选协议
const isReadAgree = ref(false)
const isAuthorize = ref(false)
const isWxLogin = ref(false)
const userLogin = reactive<{ session_key: string; uid: number }>({
    session_key: '',
    uid: -1
})
// 微信登录获取code换取个人信息
const wxLogin = () => {
    uni.showLoading({
        title: '加载中',
        mask: true
    })
    isWxLogin.value = true
    uni.login({
        provider: 'weixin',
        success: async (loginRes) => {
            console.log(loginRes)
            // 获取用户信息
            const res: loginResIntXcx = await userStore.login({ code: loginRes.code })
            console.log(res, 'res')
            if (res.code === 1) {
                // 已有手机号码，登录成功
                // uni.hideLoading()
                isAuthorize.value = true
            } else {
                // 临时保存session_key 和 uid
                userLogin.session_key = res.data.user.session_key
                userLogin.uid = res.data.user.id
                isAuthorize.value = false
            }
            uni.hideLoading()
        }
    })
}
// 已补全信息直接登录
const goLoginSuccess = uni.$util.debounce(() => {
    uni.showToast({
        title: '登录成功',
        icon: 'none',
        success: () => {
            // tabbarInfo.tabbarChangeIndex()
            setTimeout(() => {
                uni.goToPage({ url: 'pages/index/index', mode: 'redirectTo' })
            }, 2000)
        }
    })
})
// 获取手机号码
const getPhoneNumber = uni.$util.debounce((e: any) => {
    console.log(e, agreementCheckbox.value, isReadAgree.value, userLogin)
    if (agreementCheckbox.value.length <= 0) {
        uni.showToast({
            title: '请先阅读并同意协议',
            icon: 'none'
        })
        return
    }
    // 用户取消
    if (e && e.detail.errMsg === 'getPhoneNumber:fail user deny') {
        return
    }
    // 带补全手机号码信息或者初次登录
    uni.showLoading({ title: '登录中...' })
    userStore
        .authorizePhone({
            session_key: userLogin.session_key,
            iv: e.detail.iv,
            encryptedData: e.detail.encryptedData,
            uid: userLogin.uid
        })
        .then(() => {
            uni.hideLoading()
            uni.showToast({
                title: '登录成功',
                icon: 'none',
                success: () => {
                    // tabbarInfo.tabbarChangeIndex()
                    setTimeout(() => {
                        uni.goToPage({ url: 'pages/index/index', mode: 'redirectTo' })
                    }, 1500)
                }
            })
        })
}, 500)

const goagree = () => {
    uni.goToPage({
        url: 'subpackage/pages/agreement/agreement'
    })
}
</script>
<template>
    <view class="login">
        <image class="login_icon" src="../../static/logo.png" mode="aspectFill" />
        <view class="login_content">
            <view class="flex agreement_info">
                <u-checkbox-group v-model="agreementCheckbox" placement="column" @change="checkboxChange">
                    <!-- :customStyle="{ marginBottom: '8px' }" -->
                    <u-checkbox shape="circle" label="" name="true"></u-checkbox>
                </u-checkbox-group>
                <text class="agreement_content">
                    我已阅读并同意
                    <text class="agreement_link" @click="goagree">《{{ ProjectName }}用户协议》</text>
                </text>
            </view>
            <view class="btn_box">
                <u-button
                    v-if="!isReadAgree"
                    @click="getPhoneNumber"
                    text="快速登录"
                    color="linear-gradient(90deg, rgba(255, 87, 51, 1) 0%, rgba(255, 141, 26, 1) 100%)"
                    shape="circle"
                ></u-button>
                <u-button
                    v-else-if="isAuthorize"
                    @click="goLoginSuccess"
                    text="快速登录"
                    color="linear-gradient(90deg, rgba(255, 87, 51, 1) 0%, rgba(255, 141, 26, 1) 100%)"
                    shape="circle"
                ></u-button>
                <u-button
                    v-else
                    open-type="getPhoneNumber"
                    @getphonenumber="getPhoneNumber"
                    text="快速登录"
                    color="linear-gradient(90deg, rgba(255, 87, 51, 1) 0%, rgba(255, 141, 26, 1) 100%)"
                    shape="circle"
                ></u-button>
            </view>
        </view>
        <qq-footer />
    </view>
</template>

<style scoped lang="scss">
.login {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    padding: 0 30rpx;

    .login_icon {
        margin: 300rpx auto;
        width: 60%;
        height: 420rpx;
    }

    .agreement_info {
        margin-bottom: 20rpx;

        .agreement_content {
            font-size: $font-size-24;

            .agreement_link {
                color: rgba(50, 145, 252, 1);
            }
        }
    }

    .btn_box {
        padding: 0 50rpx;
    }
}
</style>
